<template>
	<div class="push">
		<div class="inner w">
			<div class="title clearfix">
				<span class="fl">推送预览</span>
				<p class="fr">数据量预估，约<i>{{len}}条/年</i></p>
			</div>
			<div class="lists">
				<ul v-if="listShow">
					<li class="items clearfix" v-for="(v,i) in datas">
						<a target="_blank" class="fl" :href="datas[i].href"><i>{{i+1+'、'}}</i>{{datas[i].title}}</a>
						<div class="group-info fl clearfix">
							<span v-show="!!datas[i].area" class="diyu">{{datas[i].area}}</span>
							<span v-show="!!datas[i].type" class="zhongbiao">{{datas[i].type}}</span>
							<span v-show="!!datas[i].subscopeclass" class="fuwu">{{datas[i].subscopeclass}}</span>
						</div>
						<div class="time fl">{{timer(new Date(Number((datas[i].publishtime)+"000")))}}</div>
					</li>
				</ul>
				<div v-else class="listError">
					<img src="../assets/pushEoor.png"/>
					<p>没有找到你订阅关键词的匹配信息！</p>
				</div>
			</div>
			<!--分页-->
			<div class="page" >
				<el-pagination 
					background layout="total, prev, pager, next, jumper" 
					@current-change="handleCurrentChange" 
					:current-page="currentPage" 
					:page-size="pagesize" 
					:total="paging">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	import { getPro } from '../api/getData.js'
	export default {
		name: 'push',
		data: function() {
			return {
				len: 0,//总推送条数
				paging :null,
				currentPage: 1, // 当前页
				pagesize: 20, // 每页显示数量
				flag:true,
				listShow:true,//列表显示隐藏
				datas: [{
					title: "", //标题
					areaa: "", //地区
					type: "", //信息类型
					subscopeclass: "", //行业
					href: "", //点击之后，跳转的地址
					publishtime: "" //发布时间
				}]
			}
		},
		computed: {

		},
		created: function() {
			
		}, // 创建时
		beforeMount: function() {}, // 挂载之前
		mounted: function() {
			this.$bus.$emit('footShow', false);

			this.searchDataInfo(1)
			
		}, // 挂载之后
		beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
		updated: function() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed: function() {}, // 实例销毁后调用
		methods: {
			timer(date) {
				var date1 = date; //开始时间
				var date2 = new Date(); //结束时间
				var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				//计算出小时数
				var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				//计算相差秒数
				var td = "30秒前";
				if(days > 0) {
					if(days > 10) {
						var date1year = date1.getFullYear();
						var date2year = date2.getFullYear();
						var date1month = date1.getMonth() + 1;
						var date1day = date1.getDate();
						if(date1month < 10) {
							date1month = "0" + date1month;
						}
						if(date1day < 10) {
							date1day = "0" + date1day;
						}
						if(date1year < date2year) {
							td = date1.getFullYear() + "-" + date1month + "-" + date1day;
						} else {
							td = date1month + "-" + date1day;
						}
					} else {
						td = days + "天前"
					}
				} else if(hours > 0) {
					td = hours + "小时前";
				} else if(minutes > 0) {
					td = minutes + "分钟前";
				}
				return td;

			},
			/* 跳转 */
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage
				this.searchDataInfo(currentPage)
			},
			searchDataInfo(page = this.currentPage) { // 请求数据
				getPro({
					'reqType': 'preview',
					'currentPage': page
				}).then(d => {
					if(d.data.status == -1){
						this.$router.push('applicationInfo')
						this.$bus.$emit('proShow',false)
					}else if(d.data.status == -2){
						this.$message.error("您没有订阅Pro权限！！！")
						this.$bus.$emit('proShow',false)
					}
					if(d.data.datas == null){
						this.listShow = false
					}
					if(d.data.status == 1) {
						this.datas = d.data.datas

						
						if(this.flag){
							this.len = d.data.count
							this.paging = d.data.paging
							this.flag = false
						}
					}
				})
				
			},
		} // 函数

	}
</script>

<style lang="scss">
	$im: #2cb7ca;
	.push {
		background-color: #f8f8fc;
		.title {
			height: 88px;
			line-height: 88px;
			span {
				color: $im;
				font-size: 28px;
			}
			p {
				font-size: 16px;
				i {
					color: $im;
				}
			}
		}
		.lists {
			background-color: #fff;
			border: 1px solid #D7D7D7;
			border-top: 2px solid $im;
			box-sizing: border-box;
			padding: 10px 26px;
			.items {
				border-bottom: 1px solid #D7D7D7;
				&:nth-last-of-type {
					border: none;
				}
				a {
					width: 850px;
					height: 60px;
					line-height: 60px;
					font-size: 16px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					&:hover {
						color: $im;
					}
				}
				.group-info {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 190px;
					height: 60px;
					font-size: 12px;
					.diyu,
					.zhongbiao,
					.fuwu {
						padding: 6px 8px 6px 8px;
						background-color: $im;
						color: #fff;
						border-radius: 4px;
						margin-left: 4px;
					}
					.zhongbiao {
						background-color: #ffba00;
					}
					.fuwu {
						background-color: #25c78c;
					}
				}
				.time {
					height: 60px;
					line-height: 60px;
					padding-left: 20px;
					font-size: 14px;
					color: #888888;
					background: url(../assets/time.png) 0 20px no-repeat;
				}
			}
			.listError{
				text-align: center;
				img{
					width: 216px;
					margin: 20px 0;
				}
				p{
					font-size: 20px;
					margin: 30px 0;
				}
			}
		}
		.page{
			height: 100px;
			overflow: hidden;
			padding-top: 30px;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-end;
		}
	}
</style>